<style lang="scss" scoped>
// 样式加私有化
    .todoList{
        width: 100vw;
        height: 100vh;
        background-image: linear-gradient(to right,rgb(254,181,179),rgb(252,195,156));
        // 弹性布局
        display: flex;
        justify-content: center;
        align-items: center;
        .tab{
            width: 540px;
            box-sizing: border-box;
            padding: 15px;
            border-radius: 15px;
            background-color: #fff;
            .title{
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    height: 70px;
                }
                span{
                    display: inline-block;
                    padding: 10px 15px;
                    background-color: rgb(255,127,80);
                    color: #fff;
                    border-radius: 10% 13px 20%;
                    transform: rotate(5deg);
                }
            }
            .detail{
                height: 50px;
                line-height: 70px;
                font-weight: bold;
                text-align: center;
                font-size: 20px;
            }
            .userInput{
                margin-top: 15px;
                height: 50px;
                text-align: center;
                input{
                    border: 0;
                    outline: 0;
                    width: 240px;
                    height: 35px;
                    line-height: 35px;
                    border-bottom: 3px dashed rgb(255,127,80);
                }
                button{
                    width: 65px;
                    background-color: rgb(255,233,253);
                    padding: 5px;
                    border-radius: 7px;
                    border: 1px solid #333;
                    transform: rotate(10deg);
                    cursor: pointer;
                    &:active{
                        transform: rotate(0);
                    }
                }
            }
            .list{
                width: 400px;
                margin-left: 55px;
                .item,
                .itemActive{
                    height: 35px;
                    line-height: 35px;
                    background-color: #f5f5f5;
                    display: flex;
                    justify-content: space-around;
                    border-radius: 7px;
                    user-select: none;
                    margin-bottom: 10px;
                    transition: all 0.5s;
                    span{
                        cursor: pointer;
                    }
                }
                .itemActive{
                    color: #fff;
                    background-color: rgb(255,127,80);
                    transform: rotateX(360deg);
                }
            }
            .cmd{
                height: 45px;
                line-height: 45px;
                text-align: right;
                span{
                    margin-right: 10px;
                    font-size: 18px;
                    user-select: none;
                    cursor: pointer;
                }
            }
        }
    }
</style>
<template>
    <!-- 
        分析：
            样式 > 
            数据结构(谁和谁是一个整体) > 
            先有数据(方便调试) > 
            调试功能;
     -->
    <div class="todoList">
        <div class="tab">
            <div class="title">
                <img src="../assets/logo.svg" alt="">
                <span>
                    To-Do-List
                </span>
            </div>
            <div class="detail">
                ~ Today I need to ~
            </div>
            <div class="userInput">
                <input type="text" v-model="value"> 
                <button @click="add()">
                    Submit
                </button>
            </div>
            <div class="list">
                <template v-for="(item,index) in list">
                    <div 
                        v-if="
                            status === 'all'||
                            (status === 'active' && item.checked === false) ||
                            (status === 'completed' && item.checked == true)
                        "
                        :key="item.id" 
                        :class="{
                            item: !item.checked,
                            itemActive: item.checked
                        }" >
                        <input type="checkbox" v-model="item.checked">
                        {{ item.title }}
                        <span @click="del(index)">
                            ✖
                        </span>
                    </div>
                </template>
                
            </div>
            <div class="cmd">
                <span @click="status = 'all'">
                    all
                </span>
                <span @click="status = 'active'">
                    Active
                </span>
                <span @click="status = 'completed'">
                    ComPleted
                </span>
                <span @click="clear()">
                    clearBoth
                </span>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
// 导出 todoList 类型定义
import {todoListData} from '@/utils/typeDate';
// 引入vue3.0 的 定义 响应类型的变量
import { ref } from "vue";
// Ref 和 ts 搭配使用
import type { Ref } from 'vue'
// 输入框的值
const value:Ref<string> = ref('');
// 列表数据
const list:Ref<todoListData[]> = ref([]);
// 状态记录 谁显示 谁不显示 all 全部显示 active 显示未选中  completed 显示选中
const status:Ref<string> = ref('all');
// 清除选中
function clear(){
    // 过滤出来 checked为 false的
    list.value = list.value.filter(item => item.checked == false);
}
// 删除
function del(index:number){
    list.value.splice(index,1)
}

// 添加
function add(){
    // 判断输入框里面的值 是否 为空
    if(value.value){
        // 给列表加数据
        list.value.push({
            id: list.value.length == 0 ? 1 :
            list.value[list.value.length-1].id + 1,
            title: value.value,
            checked: false
        })
        // 清空输入框
        value.value = '';
    }
}
</script>